<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{title}}</view>
		</view>
		<form>
		    <view class="cu-form-group">
				<view class="title">网点名称</view>
				<input placeholder="请填写(必填项)" v-model="info.name"></input>
		    </view>
			<view class="cu-form-group">
				<view class="title">网点类型</view>
				<picker mode="multiSelector" :value="multiIndex" :range="multiArray" range-key="name" @change="bindTypeChangeIn" @columnchange="bindTypeChange">
					<text>{{typeNames}}</text>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">省市区</view>
				<view :class="(pickerText!=''?'':'seled')" @tap="bindAreaChange">{{pickerText!=''?pickerText:'请选择省市区县'}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">详细地址</view>
				<input placeholder="请填写(非必填)" v-model="info.address"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">路线信息</view>
				<input placeholder="请填写(非必填)" v-model="info.routeInfo"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">联系电话</view>
				<input placeholder="请填写(非必填)" v-model="info.contactPhone"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">营业结束时间</view>
				<picker mode="time" @change="bindTimeChange" data-type="begin" class="picker">
					<view>{{openTime||'00:00'}}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">营业开始时间</view>
				<picker mode="time" @change="bindTimeChange" data-type="end" class="picker">
					<view>{{closeTime||'00:00'}}</view>
				</picker>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action">
					茶楼图片
				</view>
				<view class="action">1/1</view>
			</view>
			<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-if="placeImgUrl">
						<image :src='placeImgUrl' mode="widthFix" @click="btnUploadImg()"></image>
						<view class="cu-tag bg-red" @click="btnDelImg()">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view class="solids" @click="btnUploadImg()" v-else>
						<text class="cuIcon-cameraadd"></text>
					</view>
				</view>
			</view>
			<view class="cu-bar btn-group margin-top">
			    <button class="cu-btn bg-grey shadow-blur round" @click="$utils.toBack()">取消</button>
				<button class="cu-btn bg-orange shadow-blur round" @click="btnSaveSubmit()">确定</button>
			</view>
		</form>
		<!-- 省市区下拉 -->
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="bindAreaChangeIn" themeColor="#007AFF"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	
	export default {
		data() {
			return {
				title:'新增网点',
				info:{},
				//网点类型
				multiIndex: [0, 0],
				multiArray: [[], []],
				//省市区县
				pickerText: '',
				cityPickerValueDefault: [0, 0, 1],
				//时间
				placeImgUrl:null,
				openTime:null,
				closeTime:null,
				typeNames:'请选择网点类型'
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.info = Object.assign({},data);
				if(data.typeNames && data.typeNames.length > 0){
					_self.typeNames = data.typeNames;
				}
				_self.pickerText = data.province + '-' + data.city + '-' + data.cityArea;
				_self.placeImgUrl = data.imgUrl;
				_self.openTime = data.openTime;
				_self.closeTime = data.closeTime;
				if(data.id){
					_self.title = "修改网点";
				}
			})
			this._loadPlaceTypeListData();
		},
		methods:{
			_loadPlaceTypeListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeTypeList,{},res=>{
					console.log(res)
					if(res.code ==200){
						_self.multiArray=[res.body.items,res.body.items[0].children]
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false,
							complete:function(){
								uni.navigateBack();
							}
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000);
					}
				})
			},
			//省市区
			bindAreaChange() {
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			bindAreaChangeIn(e) {
				console.log(e.labelArr)
				this.pickerText = e.label;
				this.info.province=e.labelArr[0];
				this.info.city=e.labelArr[1];
				this.info.cityArea=e.labelArr[2];
			},
			//选择类型
			bindTypeChange(e){
				console.log(e);
				if(e.detail.column == 0){
					let item = this.multiArray[0][e.detail.value];
					if(item && item.children){
						this.multiArray[1] = item.children;
					}else{
						this.multiArray[1] = [];
					}
				}
			},
			bindTypeChangeIn(e){
				console.log(e);
				this.multiIndex = e.detail.value;
				if(this.multiIndex && this.multiIndex.length == 2){
					let item = this.multiArray[0][this.multiIndex[0]];
					if(item){
						if(item.children){
							let itemChild = item.children[this.multiIndex[1]];
							if(itemChild){
								this.typeNames = item.name + ',' + itemChild.name;
								this.info.typeCodes = item.code + ',' + itemChild.code;
								this.info.typeNames = this.typeNames;
							}
						}else{
							this.typeNames = item.name;
							this.info.typeCodes = item.code;
							this.info.typeNames = this.typeNames;
						}
					}
				}
			},
			//选择时间
			bindTimeChange(e){
				const index = e.detail.value;
				const type = e.currentTarget.dataset.type;
				if(type=="begin"){
					this.info.openTime = index;
					this.openTime = index;
				}else if(type=="end"){
					this.info.closeTime = index;
					this.closeTime = index
				}else{
					return;
				}
			},
			//上传图片
			btnUploadImg(){
				const api = this.$request;
				const store = this.$store;
				const _self = this;
				const userInfo = store.getters.GET_userInfo;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
				    success: (res) => {
						console.log(res)
						let imageSrc = res.tempFilePaths[0];
						const httpDomain = store.getters.GET_httpDomain;
						const baseURL = store.state.baseURL+'/api/v1/';
						console.log(httpDomain+baseURL+api.url.upLoadImgPlace+"  "+userInfo.token);
						console.log(imageSrc)
						uni.showLoading({
							title:'上传中...'
						})
						uni.uploadFile({
							  url: httpDomain+baseURL+api.url.upLoadImgPlace, 
							  filePath: imageSrc,
							  header:{"authorization": userInfo.token},
							  name: 'file',
							  success: (uploadFileRes) => {
								  uni.hideLoading();
								  const uploadJSON=JSON.parse(uploadFileRes.data)	  
								  console.log(uploadJSON);
								  if(uploadJSON.code==198){
									  uni.showModal({
									  	title:'登陆过期',
										content:'重新登陆',
										showCancel:false
									  })
									  return;
								  }
								  if(uploadJSON.code==200){
									_self.info.thumbnailImg=uploadJSON.body.path;
									_self.placeImgUrl=uploadJSON.body.imgUrl;
								  }else{
									uni.showModal({
										title:'上传失败',
										content:uploadJSON.msg,
										showCancel:false
									})
								  }
							  }
						});
				    }
				});
			},
			btnDelImg:function(){
				this.info.thumbnailImg = null;
				this.placeImgUrl=null;
			},
			btnSaveSubmit:function(){
				let info = this.info;
				console.log(info);
				const _self = this;
				const api = this.$request;
				api.post(api.url.placeSave,info,res=>{
					console.log(res);
					if(res.code==200){
						uni.showToast({
							title:'保存成功',
							icon:'success'
						})
						setTimeout(function(){
							uni.navigateBack();
						},1000)
					}else if(res.msg){
						uni.showModal({
							title:'保存失败',
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'保存失败',
							icon:'error'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
.container .cu-form-group{text-align:right;}
.cu-form-group uni-picker{padding-right:20rpx;}
.cu-form-group .seled{padding-right: 10px;}
</style>
